<!-- eslint-disable vue/multi-word-component-names -->
<template>
	<!--本地 icon 资源, uniapp 打包到 app 仅支持标签 image, 打包小程序和 H5 均可支持标签 img -->
	<view :class="['common-icon-container', 'common-icon-container-mobile']" :style="{
      padding: iconHotAreaSize,
    }" @click="handleImgClick">
		<image class="common-icon" :src="props.file" :style="{ width: iconWidth, height: iconHeight }" />
	</view>
</template>
<script setup lang="ts">
	import { withDefaults, computed } from 'vue';

	interface IProps {
		file : string;
		size ?: string;
		width ?: string;
		height ?: string;
		hotAreaSize ?: number | string;
	}

	interface IEmits {
		(key : 'onClick', e : Event) : void;
	}

	const emits = defineEmits<IEmits>();
	const props = withDefaults(defineProps<IProps>(), {
		file: '',
		width: '20px',
		height: '20px',
	});

	const iconHotAreaSize = computed<undefined | string>(() => {
		if (!props.hotAreaSize) {
			return undefined;
		}
		if (isNaN(Number(props.hotAreaSize))) {
			return String(props.hotAreaSize);
		}
		return `${props.hotAreaSize}px`;
	});

	const iconWidth = computed(() => {
		return props.size ? props.size : props.width;
	});

	const iconHeight = computed(() => {
		return props.size ? props.size : props.height;
	});

	const handleImgClick = (e : Event) => {
		emits('onClick', e);
	};
</script>

<style lang="scss" scoped>
	.common-icon-container {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.common-icon-container-mobile {
		cursor: none;
	}
</style>